<template>
  <div>
    <el-tree
      ref="treeRef"
      :data="menutree"
      node-key="sysid"
      :props="defaultProps"
      @node-click="handleNodeClick"
      show-checkbox
      default-expand-all
    />
    <hr />
    <div class="buttons">
      <el-button @click="getCheckedKeys" type="primary" :icon="Promotion">保存</el-button>
    </div>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useMenuStore } from '../../stores/menu'
import { ref } from 'vue'

import { Promotion } from '@element-plus/icons-vue'

import { useRolesStore } from '../../stores/roles'

const rolesStore = useRolesStore()

const treeRef = ref()
const getCheckedKeys = () => {
  const checkedKeys = [
    // 解构数组中的元素
    ...treeRef.value.getCheckedKeys(false),
    ...treeRef.value.getHalfCheckedKeys(false)
  ]
  rolesStore.modSysinfo(checkedKeys.join('-'))
}
const menuStore = useMenuStore()

const { menutree } = storeToRefs(menuStore)

const handleNodeClick = (data) => {
  console.log(data)
}

const defaultProps = {
  children: 'children',
  label: 'title'
}

menuStore.loadAllByLists()
</script>
